<template>
  <div id="box">
    <div class="box1">
      <div class="common-layout">
        <el-container>
          <el-header>
            <Headbox :headid="did"></Headbox>
          </el-header>

          <el-main>
            <Mainbox :mainid="did"></Mainbox>
            <Footerbox :footid="did"></Footerbox>
          </el-main>
          <el-footer>
            <div class="foot">
              <div
                class="lianjie"
                text
                @click="
                  dialogVisible = true;
                  getQRcode();
                "
              >
               {{tabsStyle.info}}
              </div>
            </div>
          </el-footer>
        </el-container>
        <!-- 模态弹窗二维码支付 -->
        <el-dialog
          v-model="dialogVisible"
          title="Tips"
          :before-close="handleClose"
          width="350px"
        >
          <qrcode-vue v-if="dialogVisible" :value="codeUrl.url" size="300" />
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="dialogVisible = false"
                >Confirm</el-button
              >
            </span>
          </template>
        </el-dialog> 
      </div>
    </div>
  </div>
</template>

<script setup >

import Headbox from "./component/Xheader/index.vue";
import Mainbox from "./component/Xmain/index.vue";
import Footerbox from "./component/Xfooter/index.vue";
import { ref, getCurrentInstance, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import store from "../../store/index";
import QrcodeVue from "qrcode.vue";


let { proxy } = getCurrentInstance();
const Mystore = store();
//获取路由转跳的参数 等孙张冲的页面点击医生转跳路由传过来的医生id
let Route = useRoute();
let Router = useRouter();
let did = Route.query.id; //获取路由跳转过来传的医生id值
let codeUrl = reactive({});
let orderNo = null;

//获取二维码url
function getQRcode(orderNo) {
  proxy
    .$axios({
      url: "http://localhost:8090/api/wx-pay/native/100",
      method: "POST",
    })
    .then((res) => {
      codeUrl.url = res.data.data.codeUrl;
      orderNo = res.data.data.orderNo;
      let waitPay = setInterval(check, 1000, orderNo);
      function check(orderNo) {
        proxy
          .$axios({
            url: "http://localhost:8090/api/wx-pay/getOrderStatus",
            params: { orderNo: orderNo },
          })
          .then((res) => {
            console.log(res.data.success, 123456);
            if (res.data.success) {
              clearInterval(waitPay);
              Router.push({ path: "/Xylask", query: { id: did } });
            }
          });
      }
    });
}

// 查看医生是否在线，来决定按钮是否可以点击，且改变颜色
const tabsStyle = reactive({ color: "#00c792", click: "auto",info:"支付咨询" });



(async function changColor() {
  let Online = await proxy.$axios({ url: "/getOnline" ,params:{did }});
  if (Online.data.online) {
     console.log(22222);
  } else {
    tabsStyle.color = "#668999";
    tabsStyle.click = "none";
    tabsStyle.info = "休息中";
  }
})();



// element plus js代码
import { ElMessageBox } from "element-plus";

const dialogVisible = ref(false);

const handleClose = (done) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
</script>

<style scoped  lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}

#box {
  width: 100%;
  background-color: #f4f4f4;

  .box1 {
    width: 900px;
    // height: 1000px;
    margin: 0 auto;
    // background-color: goldenrod;
    background-color: white;
  }
}
.common-layout {
  padding-bottom: 0;
  header {
    height: 300px;
    // background-color: aquamarine;
  }
  .foot {
    width: 860px;
    padding: 0;
    height: 50px;
    // background-color: #00c792;
    background-color: v-bind("tabsStyle.color");
    text-align: center;
    line-height: 50px;
    color: white;
    caret-color: transparent;
    cursor: pointer;
    position: fixed;
    bottom: 0;

    .lianjie {
      color: white;
      text-decoration: none;
      pointer-events: v-bind("tabsStyle.click");
    }
  }
}
</style>
